<template>
	<view class="page">
		<view class="body">
			<view class="live-camera" :style="'height:'+(systemInfo.windowHeight-140)+'px'">
				<live-pusher
					v-if="showLive"
					id="livePusher"
					ref="livePusher"
					class="livePusher"
					:style="{'width':systemInfo.windowWidth+'px','height':(systemInfo.windowHeight-140)+'px'}"
					mode="FHD"
					beauty="0"
					whiteness="0"
					:aspect="aspect"
					min-bitrate="1000"
					audio-quality="16KHz"
					device-position="back"
					:auto-focus="true"
					:muted="true"
					:enable-camera="true"
					:enable-mic="false"
					:zoom="false"
					@statechange="statechange"
					@error = "error" 
					:debug="true"
				></live-pusher> 
				
				<!--辅助取景框-->
				<view class="outline-box" :style="{'width':imageInfo.width+'px','height':imageInfo.width+'px','left':imageInfo.left+'px','top':imageInfo.top+'px'}">
					<image :style="{'width':imageInfo.width+'px','height':imageInfo.width+'px'}" src="@/static/images/camera_module_front.png" mode="widthFix"></image>
					<!-- <cover-view class="outline-img"></cover-view> -->
				</view>
				
				<view class="tips" :style="{'width':systemInfo.windowWidth+'px'}"><text class="text">请将蚁巢拍到红框内</text></view>
				
			</view>
			<view class="bottom">
				<!--快门键-->
				<view class="menu-snapshot"><image class="menu-snapshot-img" src="@/static/images/take_camera_btn_icon.png" mode="widthFix"></image></view>
				<text class="cancle" @click="cancle">取消</text> 
			</view>
		</view>
	</view>
</template>

<script>
	import {
		NEWS_HOST
	} from '@/config.js' 
	export default{
		name:'list',
		data(){
			return { 
				windowHeight:0,
				cameraHeight:0,
				systemInfo:uni.getSystemInfoSync(),
				imageInfo:{}
			}	 
		},
		async onLoad(params) {
			// let systemInfo = uni.getSystemInfoSync()
			// this.windowHeight = systemInfo.windowHeight
			// this.cameraHeight = systemInfo.windowHeight - 80
			this.imageInfo = {
				width : this.systemInfo.windowWidth*0.96,
				left: (this.systemInfo.windowWidth-this.systemInfo.windowWidth*0.96)/2,
				top:(this.systemInfo.windowHeight-90-this.systemInfo.windowWidth*0.96)/2
			}  
		}, 
		methods:{ 
			
		},
		components:{ 
			 
		}
	}
</script>

<style lang="less">
	page,.page,.body{
		height: 100%;
	}
.live-camera{  
		overflow: hidden;
		
	}
	.livePusher{
		position: absolute;
		left:0;
		top:0;
		height: 100px;
		width: 100px;
		background-color: #fff;
	}
	.tips{
		position: absolute;
		bottom:20px;
		/* display: flex; */
		flex-direction: row;
		justify-content: center; 		
	}
	.outline-box{
		position: relative;
	}
	.tips .text{
		background: rgba(0,0,0,.7);	
		padding: 5px 10px;
		border-radius: 5px;
		color:#ffffff;
		font-size: 14px;
	}
 .bottom{ 
	 display: flex;
	 position: relative;
	 flex-direction: row; 
	 align-items: center;
	justify-content: center;
	height: 140px;
	background: #000;
 }
 .menu-snapshot{
	width: 70px;
	margin:0 auto; 
 }
 .menu-snapshot .menu-snapshot-img{
	 width: 70px;
	 height: 70px;
 }
 .cancle{
	position: absolute;
	 right:20px;
	 top:0; 
	 color:#fff;
 }
</style>
